import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import { SignInReq } from '@/api/services/userService';
import { Button, Input, AntdForm, Password, FormItem } from '@/components/eai-design';
import { SvgIcon } from '@/components/icon';
import useInitialize from '@/hooks/event/use-initialize';
import { useSignIn } from '@/store/userStore';
import { useThemeToken } from '@/theme/hooks';

import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider';

const { VITE_LOGIN_PAGE: LOGINPAGE } = import.meta.env;
const { VITE_AUTH_FLAG: AUTHFLAG } = import.meta.env;
const authFlag = AUTHFLAG === 'true';

function LoginForm() {
  const { t } = useTranslation();
  const themeToken = useThemeToken();
  const [loading, setLoading] = useState(false);
  const { isRuiLogin } = useInitialize();

  const { loginState, setLoginState } = useLoginStateContext();
  const signIn = useSignIn();

  if (loginState !== LoginStateEnum.LOGIN) return null;

  const handleFinish = async ({ username, password }: SignInReq) => {
    setLoading(true);
    try {
      await signIn({ username, password });
    } finally {
      setLoading(false);
    }
  };
  return (
    <div className="scale-90">
      <div className="flex items-center justify-center">
        {/* <SvgIcon icon="ic-logo" size={'300px'} style={{ color: 'green' }}></SvgIcon> */}
        {/* <SvgIcon icon="ai-in-one" size={'200px'} style={{ color: 'green' }}></SvgIcon> */}
        {/* <SvgIcon icon="ic-logo2" size={'300px'} style={{ color: 'green' }}></SvgIcon> */}
      </div>
      <AntdForm
        name="login"
        size="large"
        initialValues={{
          remember: true,
        }}
        onFinish={handleFinish}
      >
        <FormItem
          name="username"
          rules={[{ required: true, message: t('sys.login.accountPlaceholder') }]}
        >
          <Input
            className="rg-custom-login-input"
            placeholder={t('sys.login.userName')}
            prefix={<SvgIcon icon="login-username" size={16} />}
          />
        </FormItem>
        <FormItem
          name="password"
          rules={[{ required: true, message: t('sys.login.passwordPlaceholder') }]}
        >
          <Password
            className="rg-custom-login-input-password"
            type="password"
            placeholder={t('sys.login.password')}
            prefix={<SvgIcon icon="login-pwd" size={16} />}
            // visibilityToggle={{
            //   visible: passwordVisible,
            //   onVisibleChange: setPasswordVisible,
            // }}
          />
        </FormItem>
        {/* <FormItem>
          <Row align="middle">
            <Col span={12}>
              <FormItem name="remember" valuePropName="checked" noStyle>
                <Checkbox>{t('sys.login.rememberMe')}</Checkbox>
              </FormItem>
            </Col>
            {LOGINPAGE && (
              <Col span={12}>
                <Button type="link" style={{ color: themeToken.colorPrimary }} href={LOGINPAGE}>
                  {t('sys.login.thirdLogin')}
                </Button>
              </Col>
            )}
          </Row>
        </FormItem> */}
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            className="mt-6 w-full"
            loading={loading}
            style={{
              height: '50px',
              background: 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
              border: 'none',
              borderRadius: '6px',
              fontSize: '18px',
            }}
          >
            {t('sys.login.loginButton')}
          </Button>
        </FormItem>

        {/* <div className="flex cursor-pointer justify-around text-2xl"></div> */}
      </AntdForm>
    </div>
  );
}

export default LoginForm;
